<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib tagdir="/WEB-INF/tags" prefix="tag"%>
<s:set var="user_role" value="%{#session.USER_ROLE}" />
<s:set var="user_info" value="%{#session.USER_INFO}" />
<s:set var="LIST_ACCOUNT" value="%{#request.LIST_ACCOUNT}" />
<html>
<head>
<title>User management</title>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">

<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
<link href="css/ace.min.css" rel="stylesheet" media="screen">
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/jquery.tagsinput.css" rel="stylesheet" />
<link href="css/trung-style.css" rel="stylesheet" media="screen">
<link href='css/cupertino/jquery-ui.min.css' rel='stylesheet' />
<link href='fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar/fullcalendar.print.css' rel='stylesheet'
	media='print' />


<script src="js/jquery.min.js"></script>
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/jquery.tagsinput.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/ace.min.js"></script>
<script src="js/moment.js"></script>
<script src="js/daterangepicker.js"></script>
<script src='js/jquery-ui.custom.min.js'></script>
<script src='fullcalendar/fullcalendar.min.js'></script>
<script src='fullcalendar/lang/all.js'></script>
<script src='fullcalendar/lang/vi.js'></script>
<script src="http://localhost:8081/socket.io/socket.io.js"></script>
</head>
<s:if test="%{#user_role != 'Admin'}"><jsp:forward
		page="login.jsp"></jsp:forward></s:if>
<body>
	<div class="index">
		<!--header -->
		<tag:HeaderTag username="${user_info.fullname}">
			<div class="breadcrumbs" id="breadcrumbs" style="margin-bottom: 10px">
				<ul class="breadcrumb" style="margin: 8px;">
					<li><i class="icon-home home-icon"></i> <a href="./Index.do">Trang
							chủ</a></li>
					<li class="active">Quản lý người dùng</li>
				</ul>
				<!-- .breadcrumb -->
			</div>
		</tag:HeaderTag>
		<!--end header -->

		<!-- main body -->
		<tag:SideBarTag active_area="6" subMenuOpen="3"></tag:SideBarTag>
		<div class="main-content">
			<div class="page-header">
				<h1>Quản lý người dùng</h1>
			</div>
			<div class="page-content">
				<table class="table table-hover">
					<tr class="active">
						<td><b>Tên tài khoản</b></td>
						<td><b>Họ và tên</b></td>
						<td><b>Trạng thái</b></td>
						<td></td>
					</tr>
					<tbody>
						<s:iterator var="list_account" value="%{#LIST_ACCOUNT}"
							status="index">
							<tr id="${list_account.username}"
								<s:if test="%{#list_account.isActive.equals(true)}">class="success"</s:if>
								<s:else>class="danger"</s:else>>

								<td>${list_account.username}</td>
								<td>${list_account.fullname}</td>
								<td id="${list_account.username}td"><s:if
										test="%{#list_account.isActive.equals(true)}">
										Đang hoạt động
									</s:if> <s:else>
										Không hoạt động
									</s:else></td>
								<td><s:if test="%{#list_account.isActive.equals(true)}">
										<c:set var="linkName" value="Khóa" />
									</s:if> <s:else>
										<c:set var="linkName" value="Mở" />
									</s:else> <input type="button"
									onclick="activeUser(${list_account.isActive},'${list_account.username}',this)"
									value="${linkName}"
									style="background: none !important; border: none; padding: 0 !important; color: blue" />
								</td>
							</tr>
						</s:iterator>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
function activeUser(isActive, name,link){
	link.setAttribute("disabled", "disabled");
	$.ajax({
	    type: "post",
        url: "ActiveAccount.do",
        data: { isActive: isActive,username:name},
        success: function (data) {
        	link.removeAttribute("disabled");	
        	var tr =  document.getElementById(name);
        	var td = document.getElementById(name+"td");
        	
        	if(tr.getAttribute("class")== "danger"){	
        		link.value = "Khóa";
        		link.setAttribute("onclick","activeUser(true,'"+ name+"',this)") ;
        		tr.setAttribute("class","success");
        		td.innerText = "Đang hoạt động";
        	} else{
        		link.value = "Mở";
        		link.setAttribute("onclick","activeUser(false,'"+ name+"',this)") ;
        		tr.setAttribute("class","danger");
        		td.innerText = "Không hoạt động";
        	}
        },
        error: function (data) {
            alert("error");
        }
    });
}
</script>
</html>